웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
VueJS를 사용한다면 v-if와 v-show를 많이 사용합니다. 이 둘을 사용하면서 왜 v-visible은 없을까? visibility: hidden을 사용하면 참 좋을텐데... 라는 생각을 할 수 있죠. 그래서 아래서는 v-visible 커스텀 디렉티브를 만들어보려고 합니다. 어떻게하면 커스텀 디렉티브를 만들 수 있는지 알아보세요.
먼저 v-visible이 원하는 동작은 아래와 같습니다.
위 세 가지를 충족시키기 위한 v-visible 디렉티브를 아래에서 만들어봅니다. 먼저 간략한 커스텀 디렉티브 만드는 방법부터 알아봅니다.
커스텀 디렉티브 v-visible을 만들기 전에 설정 방법에 대하여 알아봅니다. vuejs, nuxtjs 둘 다 비슷하나 해당 디렉티브를 설정하는 위치만 다릅니다. 아래에서 처럼 말이죠.
하나. VueJS인 경우라면?
아래와 같이 main.js에 적용하면 됩니다.
@ main.js
둘. NuxtJS인 경우라면?
NuxtJS라면 nuxt.config.js 파일의 plugins에 따로 파일을 만들어 적용하도록 합니다.
- nuxt.config.js에 plugins 블록을 찾는다.
- 해당 블록에 directives.js 파일을 만들어 축가한다.
- directives.js 파일에 디렉티브를 만든다.
@ directives.js
디렉티브를 추가하는 방법은 위와 같습니다. 참고로 vue는 custom directive를 만들 수 있도록 기능을 제공하며 다양한 훅 역시 제공합니다. 아래의 코드는 Shortcut 형태로 Mounted와 Updated에서 동작하는 간단한 형태의 디렉티브이지만 다양한 라이프사이클 훅을 사용할 수 있다는 점도 참고하시면 좋겠습니다.
Custom Directive 관련 링크 바로가기 >
https://vuejs.org/guide/reusability/custom-directives.html#introduction
그럼 이제 디렉티브가 동작할 수 있는 코드 부분을 작성해보겠습니다. 위에는 visible이라는 이름만 명시했습니다. 그 다음 argument 부분에 동작할 함수가 위치하게 됩니다. NuxtJS인 경우에서를 예로 만들어봅니다. 아래의 코드는 plugins에서 추가된 파일에 있어야하겠죠!
이것으로 모든 코드가 완성되었습니다. 정말 간단한 코드입니다.
custom 디렉티브만 필요하시면 위 코드를 그대로 가져가 사용하실 수 있습니다. 아래에서는 코드를 하나씩 살펴보려고 합니다. 그 내용은 다음과 같습니다.
첫 번째 디렉티브를 만들면서 디렉티브 이름은 'visible'로 설정하였습니다. 그리고 두 번째 인자에 해당하는 binding에서 value 값을 가져오기 위해서 { value }로 받았습니다. binding.value로 받을 수도 있습니다.
함수 내부에서는 value 값이 true인 경우 적용된 태그에 visibility: 'visible' 값을 사용하였고 false인 경우 visibility: 'hidden'을 사용하도록 작성했습니다. 바로 아래의 부분이죠!
css 스타일에서 visibility: hidden 그리고 display: none의 차이점을 아시겠죠? 영역을 가지고 있는지의 차이점을 가지게 됩니다. 논리적인 스타일 속성을 사용하거나 주변 요소의 영향을 받는 스타일 속성에서 visibility 속성이 많이 쓰입니다. 이제 위 디렉티브를 앱에서 사용하면 될 것입니다.
아래와 같이 태그 요소나 컴포넌트 요소에 디렉티브로 사용하여 적용할 수 있습니다. 만약 변수 isVisible 값에 따라 변하는 경우라면 아래처럼 사용합니다.
여기까지 커스텀 디렉티브 만들기는 모두 끝입니다!
[ 참고사항 ]
참고로 위와 같이 적용해보니 NuxtJS에서 v-visible로 사용한 경우 동작은 하지만 에러 메시지가 콘솔에 출력되는 것을 확인했습니다. 이상하게도 v-bind:visible 또는 :visible은 에러가 발생하지 않더군요... 동작은 정상적으로 하는 것을 보니 버전에 따른 이슈가 아닐까 생각됩니다. 이 부분도 같이 참고하세요!
먼저 v-visible이 원하는 동작은 아래와 같습니다.
- v-if 또는 v-show 처럼 엘리먼트가 보이지 않을 것
- style의 visibility: hidden을 적용하여 영역은 가지되 보이지만 않도록 할 것
- directive로 만들어 쉽고 빠르게 적용할 것
위 세 가지를 충족시키기 위한 v-visible 디렉티브를 아래에서 만들어봅니다. 먼저 간략한 커스텀 디렉티브 만드는 방법부터 알아봅니다.
# VueJS 또는 NuxtJS에 v-visible 커스텀 디렉티브 만들기
커스텀 디렉티브 v-visible을 만들기 전에 설정 방법에 대하여 알아봅니다. vuejs, nuxtjs 둘 다 비슷하나 해당 디렉티브를 설정하는 위치만 다릅니다. 아래에서 처럼 말이죠.
하나. VueJS인 경우라면?
아래와 같이 main.js에 적용하면 됩니다.
@ main.js
app = creativeApp()
app.directive('visible', {})
app.directive('visible', {})
둘. NuxtJS인 경우라면?
NuxtJS라면 nuxt.config.js 파일의 plugins에 따로 파일을 만들어 적용하도록 합니다.
- nuxt.config.js에 plugins 블록을 찾는다.
- 해당 블록에 directives.js 파일을 만들어 축가한다.
- directives.js 파일에 디렉티브를 만든다.
@ directives.js
import Vue from 'vue';
Vue.directive('visible', () => {})
Vue.directive('visible', () => {})
디렉티브를 추가하는 방법은 위와 같습니다. 참고로 vue는 custom directive를 만들 수 있도록 기능을 제공하며 다양한 훅 역시 제공합니다. 아래의 코드는 Shortcut 형태로 Mounted와 Updated에서 동작하는 간단한 형태의 디렉티브이지만 다양한 라이프사이클 훅을 사용할 수 있다는 점도 참고하시면 좋겠습니다.
Custom Directive 관련 링크 바로가기 >
https://vuejs.org/guide/reusability/custom-directives.html#introduction
그럼 이제 디렉티브가 동작할 수 있는 코드 부분을 작성해보겠습니다. 위에는 visible이라는 이름만 명시했습니다. 그 다음 argument 부분에 동작할 함수가 위치하게 됩니다. NuxtJS인 경우에서를 예로 만들어봅니다. 아래의 코드는 plugins에서 추가된 파일에 있어야하겠죠!
import Vue from 'vue';
Vue.directive('visible', function(ele, { value }) {
if (value === true) {
ele.style.visibility = 'visible';
} else if (value === false) {
ele.style.visibility = 'hidden';
}
});
Vue.directive('visible', function(ele, { value }) {
if (value === true) {
ele.style.visibility = 'visible';
} else if (value === false) {
ele.style.visibility = 'hidden';
}
});
이것으로 모든 코드가 완성되었습니다. 정말 간단한 코드입니다.
custom 디렉티브만 필요하시면 위 코드를 그대로 가져가 사용하실 수 있습니다. 아래에서는 코드를 하나씩 살펴보려고 합니다. 그 내용은 다음과 같습니다.
첫 번째 디렉티브를 만들면서 디렉티브 이름은 'visible'로 설정하였습니다. 그리고 두 번째 인자에 해당하는 binding에서 value 값을 가져오기 위해서 { value }로 받았습니다. binding.value로 받을 수도 있습니다.
함수 내부에서는 value 값이 true인 경우 적용된 태그에 visibility: 'visible' 값을 사용하였고 false인 경우 visibility: 'hidden'을 사용하도록 작성했습니다. 바로 아래의 부분이죠!
if (value === true) {
ele.style.visibility = 'visible';
} else if (value === false) {
ele.style.visibility = 'hidden';
}
ele.style.visibility = 'visible';
} else if (value === false) {
ele.style.visibility = 'hidden';
}
css 스타일에서 visibility: hidden 그리고 display: none의 차이점을 아시겠죠? 영역을 가지고 있는지의 차이점을 가지게 됩니다. 논리적인 스타일 속성을 사용하거나 주변 요소의 영향을 받는 스타일 속성에서 visibility 속성이 많이 쓰입니다. 이제 위 디렉티브를 앱에서 사용하면 될 것입니다.
! 만든 커스텀 디렉티브 v-visible 적용하기
아래와 같이 태그 요소나 컴포넌트 요소에 디렉티브로 사용하여 적용할 수 있습니다. 만약 변수 isVisible 값에 따라 변하는 경우라면 아래처럼 사용합니다.
<Acomponent v-visible="isVisible">
<span>Hello</span>
</Acomponent>
<span>Hello</span>
</Acomponent>
여기까지 커스텀 디렉티브 만들기는 모두 끝입니다!
[ 참고사항 ]
참고로 위와 같이 적용해보니 NuxtJS에서 v-visible로 사용한 경우 동작은 하지만 에러 메시지가 콘솔에 출력되는 것을 확인했습니다. 이상하게도 v-bind:visible 또는 :visible은 에러가 발생하지 않더군요... 동작은 정상적으로 하는 것을 보니 버전에 따른 이슈가 아닐까 생각됩니다. 이 부분도 같이 참고하세요!
아래의 글도 찾고 계시지 않나요?
